<template>
  <div class="search-bar">
    <template v-show="map">
      <el-radio-group v-model="type" @change="changeType">
        <el-radio-button v-for="(item,index) in initData.types" :key="index" :label="item.id">{{item.name}}</el-radio-button>
      </el-radio-group>
      <air-monitor ref="airMonitor" v-if="type == 'airMonitor'"/>
      <live-weather ref="liveWeather" v-if="type == 'liveWeather'" />
      <pollutant-source ref="pollutantSource" v-if="type == 'pollutantSource'" />
    </template>
  </div>

</template>
<script>
import airMonitor from './airMonitor';
import liveWeather from './liveWeather';
import pollutantSource from './pollutantSource';
export default {
  components:{
    airMonitor,
    liveWeather,
    pollutantSource
  },
  data(){
    return{
      type: 'airMonitor',
      initData:{
        types:[
          {id: 'airMonitor', name: '空气质量'},
          {id: 'liveWeather', name: '实况气象'},
          {id: 'pollutantSource', name: '污染排放'},
        ]
      },
      map: null,
      marker: null,
      t: null
    }
  },
  mounted(){
    this.t = setInterval(() => {
      this.map = this.$parent.map;
      if(this.map){
        this.$refs.airMonitor.getList(this.map);
        clearInterval(this.t);
        this.t = null;
      }
    },100);
  },
  methods:{
    changeType(val){
      // this.map = this.$parent.map;
      this.$refs[val].getList(this.map);
    }
  }
}

</script>